<template>
  <div>
  <!--头部区域,引入图标,设置高度和距离-->
  <div style="height: 60px; line-height: 60px; background-color: white; margin-bottom: 2px; display: flex">
    <div style="width: 300px">
      <img src="@/assets/logo.png" alt="图书管理系统" style="height: 40px; position: relative; top: 10px; left: 20px">
      <span style="font-size: 20px; margin-left: 25px; margin-top: 10px">图书管理系统</span>
    </div>
    <div style="flex: 1; text-align: right; margin-right: 20px">
      <el-dropdown>
        <span class="el-dropdown-link" style="cursor: pointer">
          {{ admin.username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="margin-top: -5px">
          <el-dropdown-item><div style="width: 50px; text-align: center" @click="login">退出</div></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
  <!--侧边栏和主题-->
  <div style="display: flex">
    <!--侧边栏,设置按路由切换，为了使侧边栏占满全屏,需要设置一个最小高度calc(100vh-62px)-->
    <div style="width: 200px; overflow: hidden;min-height: calc(100vh - 62px); margin-left: 2px; background-color: white;">
      <!--default-openeds	设置默认打开页面-->
      <el-menu :default-active="$route.path" router class="el-menu-demo">
        <el-menu-item index="/">
          <!--el-icon为菜单栏前面加上图标-->
          <i class="el-icon-eleme"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="user">
          <template slot="title">
            <!--el-icon为菜单栏前面加上图标-->
            <i class="el-icon-question"></i>
            <span>会员管理</span>
          </template>
          <el-menu-item index="/addUser">会员添加</el-menu-item>
          <el-menu-item index="/userList">会员列表</el-menu-item>
        </el-submenu>
        <el-submenu index="admin">
          <template slot="title">
            <!--el-icon为菜单栏前面加上图标-->
            <i class="el-icon-user"></i>
            <span>管理员管理</span>
          </template>
          <el-menu-item index="/addAdmin">管理员添加</el-menu-item>
          <el-menu-item index="/AdminList">管理员列表</el-menu-item>
        </el-submenu>
        <el-submenu index="category">
          <template slot="title">
            <i class="el-icon-s-operation"></i>
            <span>图书分类管理</span>
          </template>
          <el-menu-item index="/addCategory">图书分类添加</el-menu-item>
          <el-menu-item index="/categoryList">图书分类列表</el-menu-item>
        </el-submenu>
        <el-submenu index="book">
          <template slot="title">
            <i class="el-icon-notebook-1"></i>
            <span>图书管理</span>
          </template>
          <el-menu-item index="/addBook">图书添加</el-menu-item>
          <el-menu-item index="/bookList">图书列表</el-menu-item>
        </el-submenu>
        <el-submenu index="borrow">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>借书管理</span>
            </template>
            <el-menu-item index="/addBorrow">借书添加</el-menu-item>
            <el-menu-item index="/borrowList">借书列表</el-menu-item>
          </el-submenu>
          <el-submenu index="retur">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>还书管理</span>
            </template>
            <el-menu-item index="/returList">还书列表</el-menu-item>
          </el-submenu>
      </el-menu>
    </div>
    <!--主题内容,设置10px空隙和周边界面-->
    <div style="flex: 1;background-color: white; padding: 10px">
      <router-view/>
    </div>
  </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: "Base.vue",
  data() {
    return {
      admin: Cookies.get('admin')? JSON.parse(Cookies.get('admin')): {}
    }
  },
  methods: {
    login() {
      Cookies.remove('admin')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

</style>